<template>
    <div>
        <el-form ref="form" :model="sizeForm" label-width="80px">
            <el-form-item label="商品名称">
                <el-input v-model="sizeForm.name"></el-input>
            </el-form-item>
            <el-form-item label="所属品牌">
                <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属分类">
                <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="销售区域">
                <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="标签">
                <el-tag
                        v-for="tag in tags"
                        :key="tag.name"
                        closable
                        :type="tag.type">
                    {{tag.name}}
                </el-tag>
            </el-form-item>
            <el-form-item label="关键字">
                <el-tag
                        v-for="tag in tags"
                        :key="tag.name"
                        closable
                        :type="tag.type">
                    {{tag.name}}
                </el-tag>
                <!--<el-input v-model="keyword2" size="" style="display: inline;width: 100px;"/>-->
                <el-button icon="el-icon-plus" type="success" circle size="mini"></el-button>
            </el-form-item>
            <el-form-item label="销售时间">
                <el-date-picker
                        v-model="value5"
                        type="datetimerange"
                        :picker-options="pickerOptions2"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="服务项">
                <el-checkbox-group v-model="sizeForm.type">
                    <el-checkbox-button label="芝麻信用免押金" name="type"></el-checkbox-button>
                    <el-checkbox-button label="正品保证" name="type"></el-checkbox-button>
                    <el-checkbox-button label="上门维修" name="type"></el-checkbox-button>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="物流方式">
                <el-radio-group v-model="sizeForm.resource">
                    <el-radio border label="自营物流"></el-radio>
                    <el-radio border label="第三方物流"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否包邮">
                <el-switch
                        v-model="sizeForm.isFreeLogistic"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                </el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="toNext">下一步,添加图片以及介绍</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script>
  export default {
    name: 'product-add-step1',
    data () {
      return {
        sizeForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          isFreeLogistic: true,
          keyword2: undefined
        },
        tags: [
          { name: '标签一', type: '' },
          { name: '标签二', type: 'success' },
          { name: '标签三', type: 'info' },
          { name: '标签四', type: 'warning' },
          { name: '标签五', type: 'danger' }
        ],
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        value5: ''
      }
    },
    methods: {
      toNext () {
        this.$emit('next')
      }
    }
  }
</script>

<style scoped>

</style>
